<!-- 用户信息填写 -->
<template name="USERINFO">
  <view class='userInfo'>
    <view class='userInfo-box'>
      <form>
        <view class='username-box'>
          <label class='userInfo-left'>
            <image src='../static/images/icon-user.png' class='userInfo-icon userInfo-icon-user' mode='widthFix'></image>
          </label>
          <view class="label-title">姓名</view>
         <input class="username-input" :data-pos="pos" @input='bindUserNameChange'  v-model='USERINFO.userName' placeholder-class="phcolor" maxlength='20' :disabled="USERINFO.isOperate"/>
          <label v-if="personId != ''" :data-pos="pos" class='userInfo-right add-address' @click="personId != ''?reset():jumpRouterAddress()">
              <image  class='userInfo-right-clear' src='../static/images/icon_clear.png' mode='widthFix' style='width:28upx'  ></image>   
          </label>

          <label v-if="personId == ''" :data-pos="pos" class='userInfo-right add-address' @click="personId != ''?reset():jumpRouterAddress()">  
             <image  class='userInfo-right-address' src='../static/images/icon_address.png' mode='widthFix'  ></image> 
          </label>
        </view>

          <view class='userrelation-box'>
          <label class='userInfo-left'>
            <image src='../static/images/icon_sex.png' class='userInfo-icon' mode='widthFix'></image>
          </label>
          <view class='userrelation-choose' style="height:90upx;line-height:80upx">   
            性别
            <view class="choose-sex"> 
              <radio-group @change="radioChange">
                <view class="sex-item">
                  <image
                    src="../static/images/male_active.png"
                    mode="scaleToFill"
                    lazy-load="false">
                  </image>
                  <label class="radio"><radio value="1" :disabled="USERINFO.isOperate" checked="true" color="#ff5156"  /></label>
                </view>
                <view class="sex-item">
                  <image
                    src="../static/images/female_active.png"
                    mode="scaleToFill"
                    lazy-load="false">
                  </image>
                  <label class="radio"><radio value="2" :disabled="USERINFO.isOperate" color="#ff5156" /></label>
                </view>
               </radio-group>  
            </view>
          </view>
        </view>

        <view class='userrelation-box'>
          <label class='userInfo-left'>
            <image src='../static/images/icon_relation.png' class='userInfo-icon' mode='widthFix'></image>
          </label>
          <view class='userrelation-choose'>   
            关系<scroll-view class="userrelation-choose-scroll" scroll-x scroll-left="(USERINFO.relationSelected-10)*60>=180 ? (USERINFO.relationSelected-12)*60 : 0" >
              <view v-for="(item,index) in USERINFO.relationList" :key="index" :class="['userrelation-choose-item', (item.relationType==USERINFO.relationSelected)?'active':'']" :data-index="index" @click="USERINFO.isOperate===false ?changeRelations($event):''">{{item.relationDesc}}</view>
            </scroll-view>
            <!-- <text wx:for="{{USERINFO.relationList}}" class="userrelation-choose-item {{index==USERINFO.relationSelected?'active':''}}" data-index="{{index}}" bindtap='changeRelations'>{{item}}</text> -->
          </view>
        </view>

        <view class='userbirth-box'>
          <label class='userInfo-left'>
            <image src='../static/images/icon-date.png' class='userInfo-icon' mode='widthFix'></image>
          </label>
          <view class="label-title">生日</view>
          <view class="userbirth-input" disabled="true">{{USERINFO.birthday}}</view>
          <label class='userInfo-right'>
              <text :class="['gregorian-item',gregorian==1?'gregorian-item-active':'']" @click="gregorian==2?changeGregorian($event):''" :data-tag='1' :data-pos="pos">公</text>
              <text :class="['gregorian-item',gregorian==2?'gregorian-item-active':'']" @click="gregorian==1?changeGregorian($event):''" :data-tag='2' :data-pos="pos">农</text>
          </label>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
import Vue from "vue";
export default {
    props:["USERINFO","personId","isEditorSelfMsg","gregorian"],
    data(){
      return{
        pos:"",
      }
    },
   created() {
      console.log(this)
      
    },
      methods: {
        radioChange(e) {
            this.USERINFO.sex = e.detail.value;
            console.log(this.USERINFO.sex)
        },
        changeGregorian(e){
          this.$emit("changeGregorian", e);
        },
        bindUserNameChange (e){
           this.USERINFO.userName = e.detail.value;
        }, 
        changeRelations: function(e) {
          let tagNum = this.USERINFO.relationList[e.currentTarget.dataset.index].relationType
          this.USERINFO.relationSelected= tagNum
        },
        jumpRouterAddress(){
          this.$emit("jumpRouterAddress");
        },
        reset(){
           this.$emit("reset");
        }
      },
}
</script>

<style scoped>
.userInfo-box{
  width: 520upx;
  margin: 0 auto;
  text-align: left
}
.userInfo-box .username-box,
.userInfo-box .userbirth-box,
.userInfo-box .userrelation-box{
  position: relative
}
.userInfo-box .userbirth-box{
  margin-top: 45upx;
}
.userInfo-box .userInfo-left .userInfo-icon{
  position: absolute;
  top: 24upx;
  left: 0;
  width: 32upx;
  height: 30upx;
}
.label-title{
  position: absolute;
  top: 14upx;
  left: 44upx;
  width: 60upx;
  height: 64upx;
  color: #8a959e;
  text-align: center;
}
.userInfo-box .userInfo-left .userInfo-icon.userInfo-icon-user{
  width: 26upx;
}
.userInfo-box .username-input,
.userInfo-box .userbirth-input{
  height: 75upx;
  line-height: 75upx;
  border-bottom: 1upx solid #d4d7da;
  padding-left: 125upx;
  color: #8a959e
}
.userInfo-box .username-input{
  padding-right: 70upx;
}
.userInfo-box .userbirth-input{
  padding-right: 110upx;
}
.userInfo-box .userInfo-right{
  position: absolute;
  right: 10upx;
  top: 14upx;
}
.userInfo-box .userInfo-right.add-address{
  position: absolute;
  right: -15upx;
  top: -7upx;
  width: 88upx;
  height: 88upx;
  text-align: center;
  line-height: 88upx;
}
.userInfo-box .userInfo-right text.gregorian-item{
  display: inline-block;
  width: 42upx; 
  height: 42upx;
  line-height: 42upx;
  font-size: 24upx;
  color: #5d656b;
  text-align: center;
  border: 1upx solid #d4d7da;
  border-radius: 5upx;
  margin-right: 10upx;
}
.userInfo-box .userInfo-right text.gregorian-item:last-child{
  margin-right: 0
}
.userInfo-box .userInfo-right text.gregorian-item.gregorian-item-active{
  background: #fc5459;
  color: #fff;
  border-color: #fc5459
}
.userInfo-box .userInfo-right image{
  vertical-align: middle
}
.userInfo-box .userInfo-right image.userInfo-right-clear{
  width: 28upx;
}
.userInfo-box .userInfo-right image.userInfo-right-address{
  width: 36upx;
  height: 37upx;
}

.userrelation-choose{
  position: relative;
  height: 70upx;
  line-height: 70upx;
  border-bottom: 1upx solid #d4d7da;
  padding-left: 45upx;
  color: #8a959e;
  margin-top: 50upx;
  display: flex;
}
.userrelation-choose-scroll{
  position: absolute;
  right: 0;
  display: inline-block;
  width: 395upx;
  white-space: nowrap;
  vertical-align: top;
  margin-left: 15upx;
}
.userrelation-choose .userrelation-choose-item{
  display: inline-block;
  border: 1upx solid #d4d7da;
  border-radius: 5upx;
  margin-right: 10upx;
  width: 74upx;
  height: 45upx;
  line-height: 45upx;
  text-align: center;
  font-size: 26upx;
}
.userrelation-choose .userrelation-choose-item:last-child{
  margin-right: 0;
}

.userrelation-choose .active{
  background: #fc5459!important;
  color: #fff!important;
  border-color: #fc5459!important;
}

/* input中placeholder的默认颜色 */
.phcolor{
  color: #8a959e;
  font-size: 30upx;
}
/* 去掉横向滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

.userrelation-choose .nochoose{
  background: #ebebeb;
  border:1upx solid #ebebeb;
  color: #a3a3a3
}
.choose-sex {
  width: 330upx;
  line-height: 70upx;
  display: flex;
  align-items: center;
  justify-content:space-between;
  margin-bottom: 10upx;
  margin-left: 80upx;
}
radio-group{
   width: 330upx;
   display: flex;
   justify-content:space-between;
}
.sex-item{
  display: flex;
  align-items: center;
}
.choose-sex image{
  width: 70upx;
  height: 70upx;
}

radio{
  width: 30upx;
  height: 30upx;
  padding-left: 12upx;
}


</style>
